<template>
	<view>
	<u-navbar :border-bottom="false" title="客户跟进情况" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
		<view class="cu-timeline">
			<view class="cu-item text-blue" v-for="(item, index) in dataList" :key="index">
				<view class="bg-blue content">
					<view>
						<text>{{item.createTime}}</text><text class="relationshipUser">联系人：{{item.relationshipUser}}</text>
					</view>
					<view>
						<text>{{item.relationshipResult}}</text>
					</view>
					<view>
						<text>备注：{{item.relationshipRemark==null?'':item.relationshipRemark}}</text>
					</view>
				</view>
			</view>
		</view>	
		<view class="entry-mulu" @click="goSubmit()">
			<image src="/static/fabu.png"></image>
		</view>	
		<view style="padding:20rpx 0;" v-if="dataShow">
			<graceEmpty text="暂无数据" :iconSize="100" :iconType="4" iconColor="#9DD26D" textColor="#9DD26D"></graceEmpty>
		</view>	
	</view>
</template>


<script>
var _self;
var page = 1,
	pageSize = 15;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	import graceEmpty from "@/colorui/components/graceEmpty.vue";
	export default {
		components: {
			graceEmpty
		},
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
	    data() {
	        return {
				dataList: [],
				dataShow: false,
				customerId: '',
	        }
	    },
		onUnload() {
			page = 1;
			this.dataList = [];
		},		
		onLoad(e) {
			_self = this;
			if(e.customerId!=null && e.customerId!=''){
				this.customerId = e.customerId;
			}
			page = 1;
			this.dataList = [];
			this.getDataList();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			page = 1;
			this.dataList = [];
			this.getDataList();
		},
		// 加载更多
		onReachBottom: function() {
			this.getDataList();
		},
	    methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			goSubmit(){
				uni.navigateTo({
					url:'/pageB/component/recordadd?customerId='+this.customerId
				})
			},
	        getDataList: function() {
	        	var hideload = 0;
	        	uni.showLoading();
	        	uni.request({
	        		url: this.serverUrl + 'app/getRelationshipRecordList',
	        		data: {
	        			customerId: this.customerId,
	        			pageNum: page,
	        			pageSize: pageSize,
	        		},
	        		header: {
	        			"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
	        		},
	        		method: "POST",
					success: (r) => {
						// console.log(r);
						if (r.data.code == 0) {
							var pageSum = Math.ceil(r.data.count/pageSize);
							if(pageSum==0){
								this.dataShow = true;
							}else{
								if (page>pageSum) {
									hideload = 1;
									uni.hideLoading();
									uni.showToast({
										title: "没有更多了",
										icon: "none",
										duration: 1500
									}); 
								}else{
									this.dataShow = false;
									for (var i = 0; i < r.data.data.length; i++) {
										this.dataList = this.dataList.concat(r.data.data[i]);
									}
									page++;
								}
							}
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
	        	});
	        }      
		}
	}	
</script>

<style>
	.relationshipUser{
		margin-left: 50rpx;
	}
	.entry-mulu {
		position: fixed;
		bottom: 5%;
		right: 8%;
		z-index: 888;
		/* background: #ff9900; */
		width: 100upx;
		height: 100upx;
		/* border-radius: 40px;
		box-shadow: 2px 2px 2px #888888;
		opacity:0.7 ; */
	}
	
	.entry-mulu image {
		padding: 8upx;
		width: 100upx;
		height: 100upx;
	}
</style>
